<template>
  <view class="container">
    <!-- 订单状态 -->
    <view class="order-status-header" :class="'status-' + orderDetail.status">
      <view class="status-icon">
        <image class="icon-img" :src="getOrderStatusIcon(orderDetail.status)"></image>
      </view>
      <view class="status-info">
        <text class="status-text">{{ getOrderStatusText(orderDetail.status) }}</text>
        <text class="status-desc">{{ getOrderStatusDesc(orderDetail.status) }}</text>
      </view>
    </view>
    
    <!-- 电站信息 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">电站信息</text>
      </view>
      <view class="station-info">
        <text class="station-name">{{ orderDetail.stationName }}</text>
        <text class="gun-code">充电桩: {{ orderDetail.gunCode }}</text>
      </view>
    </view>
    
    <!-- 订单信息 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">订单信息</text>
      </view>
      <view class="order-info">
        <view class="info-item">
          <text class="label">订单号</text>
          <text class="value">{{ orderDetail.orderNo }}</text>
        </view>
        <view class="info-item">
          <text class="label">创建时间</text>
          <text class="value">{{ orderDetail.createTime }}</text>
        </view>
        <view class="info-item">
          <text class="label">开始时间</text>
          <text class="value">{{ orderDetail.startTime }}</text>
        </view>
        <view class="info-item">
          <text class="label">结束时间</text>
          <text class="value">{{ orderDetail.endTime }}</text>
        </view>
      </view>
    </view>
    
    <!-- 费用明细 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">费用明细</text>
      </view>
      <view class="cost-detail">
        <view class="cost-item">
          <text class="label">充电电量</text>
          <text class="value">{{ orderDetail.power }}</text>
        </view>
        <view class="cost-item">
          <text class="label">电费</text>
          <text class="value">¥{{ parseFloat(orderDetail.amount - orderDetail.serviceFee).toFixed(2) }}</text>
        </view>
        <view class="cost-item">
          <text class="label">服务费</text>
          <text class="value">¥{{ orderDetail.serviceFee }}</text>
        </view>
        <view class="cost-item total">
          <text class="label">合计</text>
          <text class="value">¥{{ orderDetail.amount }}</text>
        </view>
      </view>
    </view>
    
    <!-- 底部操作 -->
    <view class="bottom-actions">
      <button class="action-btn" @click="contactService">联系客服</button>
      <button 
        v-if="orderDetail.status === 1" 
        class="action-btn primary"
        @click="applyInvoice"
      >
        申请发票
      </button>
    </view>
  </view>
</template>

<script>
import api from '../../api/index.js'

export default {
  data() {
    return {
      orderId: 0,
      orderDetail: {
        id: 0,
        orderNo: '',
        stationName: '',
        gunCode: '',
        startTime: '',
        endTime: '',
        power: '',
        amount: '',
        serviceFee: '',
        status: 1,
        createTime: ''
      }
    }
  },
  onLoad(options) {
    this.orderId = options.id || 1
    this.getOrderDetail()
  },
  methods: {
    // 获取订单详情
    async getOrderDetail() {
      try {
        const res = await api.order.getOrderDetail(this.orderId)
        if (res.code === 200) {
          this.orderDetail = res.data
        }
      } catch (error) {
        console.error('获取订单详情失败:', error)
      }
    },
    
    // 获取订单状态图标
    getOrderStatusIcon(status) {
      const iconMap = {
        1: '/static/icons/order-complete.png',
        2: '/static/icons/order-charging.png',
        3: '/static/icons/order-cancel.png'
      }
      return iconMap[status] || '/static/icons/order-default.png'
    },
    
    // 获取订单状态文本
    getOrderStatusText(status) {
      const statusMap = {
        1: '已完成',
        2: '充电中',
        3: '已取消'
      }
      return statusMap[status] || '未知状态'
    },
    
    // 获取订单状态描述
    getOrderStatusDesc(status) {
      const descMap = {
        1: '充电已完成，费用已支付',
        2: '正在充电中，请勿移动车辆',
        3: '订单已取消，费用已退回'
      }
      return descMap[status] || ''
    },
    
    // 联系客服
    contactService() {
      uni.navigateTo({
        url: '/pages/service/chat'
      })
    },
    
    // 申请发票
    applyInvoice() {
      uni.showToast({
        title: '申请发票功能待实现',
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding-bottom: 120rpx;
}

.order-status-header {
  display: flex;
  align-items: center;
  padding: 40rpx 20rpx;
  margin-bottom: 20rpx;
}

.order-status-header.status-1 {
  background-color: #e8fff0;
  color: #4cd964;
}

.order-status-header.status-2 {
  background-color: #e8f4ff;
  color: #007aff;
}

.order-status-header.status-3 {
  background-color: #f5f5f5;
  color: #ccc;
}

.status-icon {
  margin-right: 20rpx;
}

.icon-img {
  width: 80rpx;
  height: 80rpx;
}

.status-info {
  display: flex;
  flex-direction: column;
}

.status-text {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.status-desc {
  font-size: 28rpx;
}

.section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 0 20rpx;
}

.section-header {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
}

.station-info {
  padding: 20rpx 0;
}

.station-name {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.gun-code {
  font-size: 28rpx;
  color: #666;
}

.order-info,
.cost-detail {
  padding: 20rpx 0;
}

.info-item,
.cost-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.info-item:last-child,
.cost-item:last-child {
  margin-bottom: 0;
}

.cost-item.total {
  border-top: 1rpx solid #f5f5f5;
  padding-top: 20rpx;
  margin-top: 20rpx;
}

.label {
  font-size: 28rpx;
  color: #666;
}

.value {
  font-size: 28rpx;
  color: #333;
}

.total .value {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6600;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #fff;
  display: flex;
  padding: 20rpx;
  border-top: 1rpx solid #f5f5f5;
}

.action-btn {
  flex: 1;
  margin: 0 10rpx;
  background-color: #f5f5f5;
  border: none;
  font-size: 32rpx;
  color: #666;
  border-radius: 10rpx;
}

.action-btn.primary {
  background-color: #007aff;
  color: #fff;
}
</style>